body {
font: 13px/1.4 Calibri, "Trebuchet MS", Trebuchet, Helvetica, sans-serif;
}

body#home {
}

.debug
{
height: 1px;
clear: both;
}

::selection {
color: #fff;
background: #D46F5B;
}
::-moz-selection {
color: #fff;
background: #D46F5B;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
p {
font-size: 13px;
text-align: justify;
}

a:active, a:focus
{
outline: 1px dotted;
}

a:visited
{
color: #551A8B;
}

h2 a
{
color: #245170;
}

h2 a:visited
{
color: #245170;
}

.img-right {
float: right;
margin: 0 0 20px 20px;
}

.img-left {
float: left;
margin: 5px 20px 10px 0;
/* margin: 10px 20px 20px 0; OLD */
}

.img-left + p /* on remonte les paragraphes */
{
margin-top: 5px;
}

.tactile-age {
text-align: center;
font-size: 22px;
color: #cd5b41;
}

/* page appli */


#content .page-appli h2 {
height: 44px;
padding: 10px 0 0 0;
margin: 0;
text-align: center;
background: url(/upload/design/developpements/dev-head-bg.png) top center no-repeat;
}

#content .page-appli h3, h3.liste-jeux{
clear: both;
margin: 0;
font-size: 18px;
padding: 0 0 0 15px;
background: url(/upload/design/developpements/dev-h3-bg.png) 0 7px no-repeat;
}
#content .page-appli h4 {
font-size: 16px;
}
#content .page-appli {
padding-bottom: 13px;
background: url(/upload/design/developpements/dev-bottom-bg.png) bottom center no-repeat;
}
#content .page-appli div {
border-left: solid 1px #eee;
border-right: solid 1px #eee;
padding: 0 15px 20px 15px;
overflow: hidden;
}

#content .page-appli2 h2 {
margin: 25px 0 15px 0;
}

#content .page-appli2 h3 {
clear: both;
margin: 0;
font-size: 18px;
}

#content .page-appli2 h4 {
font-size: 16px;
}
#content .page-appli2 {
padding-bottom: 13px;
background: url(/upload/design/developpements/dev-bottom-bg.png) bottom center no-repeat;
}
#content .page-appli2 div {
border-left: solid 1px #eee;
border-right: solid 1px #eee;
padding: 0 15px 20px 15px;
overflow: hidden;
}

#content img.img-large
{
margin-left: -15px;
}

#content img.img-large + p
{
margin-top: 0;
}


#content .cp-button {
clear: both;
font-size: 24px;
color: #666;
padding-left: 45px;
width: 333px;
height: 41px;
line-height: 38px;
display: block;
background: url(/upload/design/developpements/cp-button-bg.png) no-repeat;
}
#content a:hover.cp-button {
text-decoration: none;
color: #333;
background: url(/upload/design/developpements/cp-button-bg.png) no-repeat 0 -41px;
}

#content .cp-button-contact {
clear: both;
font-size: 24px;
color: #666;
padding-left: 65px;
padding-top: 8px;
width: 314px;
height: 63px;
line-height: 25px;
display: block;
text-align: left;
background: url(/upload/design/developpements/cp-button-contact.png) top no-repeat;
margin-left: 120px;
margin-top: 46px;
}

#content .cp-button-contact:hover{ 
color: #333333;
text-decoration: none;
text-align: left;
background: url(/upload/design/developpements/cp-button-contact.png) bottom no-repeat;
}

#content a.appli-button {
background: url(/upload/design/developpements/appli-button-bg.png) no-repeat;
width: 148px;
height: 20px;
line-height: 20px;
display: block;
float: right;
color: #333;
padding-left: 22px;
}

#content a:hover.appli-button {
background: url(/upload/design/developpements/appli-button-bg.png) no-repeat 0 -20px;
text-decoration: none;
}

#content a.appli-button-large {
background: url(/upload/design/developpements/appli-button-bg-large.png) no-repeat;
width: 210px;
height: 20px;
line-height: 20px;
display: block;
float: right;
color: #333;
padding-left: 22px;
}

#content a:hover.appli-button-large {
background: url(/upload/design/developpements/appli-button-bg-large.png) no-repeat 0 -20px;
text-decoration: none;
}

#content a.appli-button-xtralarge {
background: url(/upload/design/developpements/appli-button-bg-xtralarge.png) no-repeat;
width: 409px;
height: 20px;
line-height: 20px;
display: block;
float: right;
color: #333;
padding-left: 22px;
}
#content a:hover.appli-button-xtralarge {
background: url(/upload/design/developpements/appli-button-bg-xtralarge.png) no-repeat 0 -20px;
text-decoration: none;
}

#content a.appli-button-sol-large, #content a.appli-button-mesure {
background: url(/upload/design/developpements/appli-button-bg-sol-large.png) no-repeat;
width: 228px;
height: 20px;
line-height: 20px;
display: block;
float: right;
color: #333;
padding-left: 22px;
text-align: left;
}
#content a:hover.appli-button-sol-large {
background: url(/upload/design/developpements/appli-button-bg-sol-large.png) no-repeat 0 -20px;
text-decoration: none;
}

#content a.appli-button-mesure
{
background: url(/upload/design/developpements/appli-button-bg-mesure.png) no-repeat;
float: none;
width: 288px;
}

#content a:hover.appli-button-mesure
{
background: url(/upload/design/developpements/appli-button-bg-mesure.png) no-repeat 0 -20px;
text-decoration: none;
}

#content a.appli-button-small {
background: url(/upload/design/developpements/appli-button-bg-small.png) no-repeat;
width: 100px;
height: 20px;
line-height: 20px;
display: block;
float: right;
color: #333;
padding-left: 22px;
}

#content a:hover.appli-button-small {
background: url(/upload/design/developpements/appli-button-bg-small.png) no-repeat 0 -20px;
text-decoration: none;
}


#content a.pdf-button, a:hover.pdf-button
{
width: 232px;
height: 22px;
display: block;
padding-left: 35px;
padding-top: 4px;
background : url('/upload/design/developpements/bouton-pdf.png') no-repeat top;
text-decoration: none;
color: #666;
cursor: pointer;
}

#content a:hover.pdf-button
{
background : url('/upload/design/developpements/bouton-pdf.png') no-repeat bottom;
text-decoration: underline;
color: #333333;
}


/*-----------------------
Page dev Surface
-----------------------*/

#content #dev-surface-page ul {
margin: 0;
}
#content #dev-surface-page li {
float: left;
position: relative;
padding: 0;
margin: 0 9px 0 0px;
}

#content #dev-surface-page h3 a {
color: #fff;
}

/*-----------------------
Videos home
-----------------------*/

#videos-home {
width : 630px;
padding: 15px;
height : 490px;
background: url(/upload/design/home/videos-home-bg.png) top center no-repeat;
}
#videos-home-2 {
width : 630px;
padding: 15px;
height : 490px;
background: url(/upload/design/home/videos-home-bg2.png) top center no-repeat;
}
#video-player {
}
#video-list {
position: relative;
overflow: hidden;
width: 580px;
height: 94px;
float: left;
margin-top: 7px;
z-index: 999;
}
#video-list .items {
width: 20000em;
position: absolute;
clear: both;
}
#video-list a {
display: block;
float: left;
margin: 0 0 0 17px;
}
#video-list a img {
display: block;
opacity: .9;
border: solid 2px #182C33;
}
#video-list a:hover img {
opacity: 1;
border: solid 2px #D47059;
}
#video-list .current img {
opacity: 1;
border: solid 2px #D47059;
}
a.browse {
text-indent: -9999em;
outline: 0;
display: block;
width: 25px;
height: 25px;
float: left;
cursor: pointer;
margin-top: 40px;
background: url(/upload/design/home/arrow-bg.png) no-repeat;
}

/* right */
a.right { 
background-position: 0 -25px;
clear:right;
margin-right: 0px;
}
a.right:hover {
background-position: -25px -25px;
}
a.right:active {
background-position: -50px -25px;
} 

/* left */
a.left {
margin-left: 0px;
} 
a.left:hover {
background-position: -25px 0;
}
a.left:active {
background-position: -50px 0;
}
a.disabled {
visibility:hidden !important;		
}
#tooltip {
margin-top: 10px;
display: none;
font-size: 12px;
height: 80px;
width: 180px;
padding: 20px;
color: #fff;
background: url(/upload/design/home/tooltip-bg.png) no-repeat;
}

/*-----------------------
STRUCTURE
-----------------------*/

#wrapper
{
position: absolute;
top: 0;
width: 100%;
z-index: 20;
}

#container {
width: 960px;
padding-left: 10px; /* Pour éviter qu'en modifiant taille navigateur colle contre bord gauche. */
margin: 0 auto;
position: relative;
}

#logo-container
{
height: 191px;
width: 100%;
background: url('/upload/design/logo-after-mouse.png') no-repeat center top;
z-index: 20;
top: 0;
position: absolute;
}

body#home #background-container
{
width: 100%;
position: absolute;
top: 0;
z-index: 10;
background: url('/upload/images/home/body/body-1.jpg') no-repeat center top #F8F8F8;
}

body#home #background-container img
{
display: none;
}

#slider a.sliderPrev
{
width: 52px;
height: 107px;
display: block;
background: url('/upload/design/home/fleche-prev.png') no-repeat;
position: absolute;
left: -150px;
top: 270px;
color: transparent;
}

#slider a.sliderNext
{
width: 52px;
height: 107px;
display: block;
background: url('/upload/design/home/fleche-next.png') no-repeat;
position: absolute;
right: -120px;
top: 270px;
color: transparent;
}

/*-----------------------
HEADER
-----------------------*/

body#home #header
{
height: 492px;
position: relative;
}

#header
{
height: 201px;
position: relative;
}

#header #logo h1 a
{
display: block;
height: 89px;
left: -5px;
position: absolute;
text-indent: -9999px;
top: 60px;
width: 340px;
}

body#home #header #topMenu
{
height: 192px;
}

#header #topMenu
{
width: 87px;
height: 162px;
float: right;
margin-right: 80px;
font-size: 16px;
font-weight: bold;
background: url('/upload/design/topMenu.png') no-repeat left top;
}

#header #topMenu ul#various
{
margin-top: 4px;
color: #272727;
font-size: 16px;
overflow: auto;
padding-left: 21px;
}

#topMenu ul#various li
{
float: left;
margin-right: 10px;
}
				
#header #topMenu ul#various a
{
color: #272727;
font-size: 16px;
}

body #header #topMenu ul#various a:hover
{
text-decoration: underline;
}

#header #topMenu ul#various a:hover
{
text-decoration: none;
}

#home #header #textes-visuels
{
width: 300px;
font-size: 15px;
position: absolute;
z-index: 800;
right: 2px;
top: 300px;
font-weight: bold;
}

#home #header #textes-visuels a, #home #header #textes-visuels a:hover
{
display: block;
text-decoration: none;
color: #454545;
}
		
#home #header #textes-visuels div
{
position: absolute;
top: 0;
display: none;
}

#home #header #textes-visuels div p
{
margin-top: 0px;
font-size: 16px;
line-height: 16px;
margin-top: 0;
}

#home #header #textes-visuels div h2
{
font-size: 20px;
font-weight: bold;
}

#header #links
{
position: absolute;
left: 0;
z-index: 999;
background: none;
height: 255px;
width: 960px;
top: 192px;
}

#header #links a 
{
display: block;
height: 255px;
width: 960px;
color: transparent;
}

#path
{
border-bottom: 1px solid #7F7F7F;
font-size: 12px;
margin-bottom: 10px;
padding: 5px 0;
}

#path a
{
color: #474747;
}

#content-wrapper {
overflow: hidden;
background: #FFF;
}
#content {
float: left;
width: 660px;
padding: 0 10px 20px 10px;
height: 100%;
color: #535353;
}

#sidebar {
float: right;
width: 250px;
margin-right: -8px;
}

#home #sidebar {
margin-right: -6px;
}



/*-----------------------
FOOTER
-----------------------*/

#footer-wrapper {
background: #183247 url(/upload/design/footer/footer-bg.jpg) top center no-repeat;
}
#footer {
width: 960px;
margin: 0 auto;
color: #fff;
overflow: hidden;
}
#footer ul {
width: 25%;
float: left;
}
#footer .baseline a {
font-size: 22px;
font-weight: bold;
text-align: center;
margin: 10px 0;
}
#footer h3 {
font-size: 17px;
font-weight: bold;
padding: 15px 0;
clear: both;
}
#footer a {
color: #fff;
font-size: 15px;
}
#footer a:hover {
text-decoration:underline;
}
.network {
float: left;
margin: 0;
}
.network a {
display: block;
float: left;
width: 24px;
height: 25px;
text-indent: -99999em;
position: relative;
}
.blog a {
background: url(/upload/design/footer/social-icons.png) no-repeat left top;
}
.facebook a {
background: url(/upload/design/footer/social-icons.png) no-repeat -24px top;
}
.twitter a {
background: url(/upload/design/footer/social-icons.png) no-repeat -48px top;
}
.linkedin a {
background: url(/upload/design/footer/social-icons.png) no-repeat -72px top;
}
.youtube a {
background: url(/upload/design/footer/social-icons.png) no-repeat -96px top;
}
#footer div p {
clear: both;
text-align: center;
}
#footer address {
font-style: normal;
}

/*----------------------
HOME
-----------------------*/

.annonce {
margin-bottom: 25px;
}
.annonce h2 {
clear: both;
color: #245170;
padding: 0 0 5px 0;
border-bottom: 1px solid #ddd;
}
.annonce p {
color: #666;
text-align: justify;
}
.annonce img {
float:left;
margin: 3px 20px 20px 0;
}

/*---------------------
FORMS
-----------------------*/

#contact_form input, #contact_form textarea  {
margin-bottom:3px;
padding:2px;
}

#content table.table-projet
{
position: relative;
top: 15px;
}


/*-----------------------
LINKS
-----------------------*/

a {
color: #CC583E;
text-decoration: none;
}

a:hover {
text-decoration: underline;}

#header a {
color: #fff;
text-decoration: none;
}

#header a:hover {
text-decoration: underline;
}

.pdf {
background: url(/upload/design/pdf.png) no-repeat 0 2px;
padding: 2px 0 2px 22px;
}



/*-------------------------
TITLE
-------------------------*/

#content h1 {
color: #245170;
margin: 0 0 10px 0;
border-bottom: 1px solid #ddd;
padding: 0 0 5px 0;
font-size: 22px;
}
#content h2 {
font-size: 18px;
margin: 15px 0 10px 0;
}
#content h3 {
font-size: 15px;
margin: 15px 0 10px 0;
}
#content h4 {
font-size: 13px;
}
#content ul {
list-style:none;
padding:0;
margin-left:25px;
}
#content li {
background:url(/upload/img/design/list.gif) no-repeat 0 3px;
padding: 0 0 0 15px;
margin: 0.5em 0;
}

/*-----------------------
IMAGE
-------------------------*/
img.left {
margin: 0 8px 5px 0;
float:left;
}
img.right {
margin: 0 0 15px 15px;
float:right;
}

/*---------------------
lists
----------------------*/



/*----------------------
generique
-------------------------*/
.orange {
color: #cd5b41;
}

.aftermouse {
color: #689ccb;
}

/*-----------------------------
NAVIGATION MENU
-----------------------------*/
body#home #navigation
{
	 margin-top: 261px;
}

#navigation
{
        background: url('/upload/design/navbar2.png') no-repeat bottom left;
        height: 36px;
	float: left;
	width: 960px;
}

#navigation ul
{
	list-style-type: none;
	font-size: 15px;
	position: relative;
	height: 29px;
        top: 10px;
}

#navigation ul li
{
float: left;
background: url('/upload/design/sep-menu.png') no-repeat left top;
padding-left: 20px;
padding-top: 3px;
margin-right: 20px;
height: 25px;
padding-top: 1px;
}

#navigation ul li.first-item
{
background: none;
padding-left: 10px;
}

#navigation ul li a 
{
color: #ffffff;
}

/*-------------------------------
CHOIX DE LA LANGUE
--------------------------------*/
/* OLD & SAVE
#langue {
float: right;
margin-right:66px;
width: 104px;
padding-right:25px;
background: url(/upload/design/langues-v3-2.png) top left no-repeat;
overflow: hidden;
height: 21px;
}

#langue {
background: url("/upload/design/langues-v3.png") no-repeat scroll left top transparent;
float: right;
height: 21px;
margin-right: 71px;
overflow: hidden;
padding-right: 10px;
width: 52px;
}

*/

#langue {
float: right;
height: 21px;
margin-top: 10px;
overflow: hidden;
width: 100px;
}

#langue li {
float:right;
margin-right:4px;
width: 14px;
margin-top:5px!important;
height: 11px;
}
#langue a {
display: block;
width: 14px;
height: 11px;
text-indent: -999999em;
outline: 0px;
}
#french.selected,
a:hover#french {
background: url(/upload/design/flag0.png) left -11px no-repeat !important;
}
#french {
background: url(/upload/design/flag0.png) no-repeat left 0px;
}
#english {
background: url(/upload/design/flag0.png) no-repeat -19px top;
}
#english.selected,
a:hover#english {
background: url(/upload/design/flag0.png) no-repeat -19px  -11px;
}
#deutsch {
background: url(/upload/design/flag0.png) no-repeat -38px top;
}
#deutsch.selected,
a:hover#deutsch {
background: url(/upload/design/flag0.png) no-repeat -38px -11px;
}


#espagnol {
background: url(/upload/design/flag0.png) no-repeat -57px top;
}
#espagnol.selected,
a:hover#espagnol {
background: url(/upload/design/flag0.png) no-repeat -57px -11px;
}

#italian {
background: url(/upload/design/flag0.png) no-repeat -76px top;
}
#italian.selected,
a:hover#italian {
background: url(/upload/design/flag0.png) no-repeat -76px -11px;
}

/*----------------------------
SIDEBAR
----------------------------*/

#sidebar a {
color: #CC583E;
}

li.ad
{
margin-bottom: 7px;
}

.sb-bloc {
margin-bottom: 2px;
}
.sb-bloc h2 {
background: url(/upload/design/sidebar-h3.png) top left no-repeat;
font-size: 18px;
height:45px;
line-height:38px;
color: #245170;
padding-left: 15px;
}

.sb-bloc-inside {
background: url(/upload/design/sidebar-inside.png) bottom left no-repeat;
padding: 0 18px 15px 15px;
}
.contact
{
padding: 0 18px 15px 7px;
}
.sb-bloc-inside a {
color: #535353;
}
.sb-bloc h3 {
font-size: 16px;
margin: 0;
}

#sidebar .sb-bloc p {
margin: 4px 0;
padding: 0 0 5px 0;
border-bottom: solid 1px #ddd;
}
.sb-bloc-inside ul {
overflow: hidden;
height: 100%;
}
.sb-bloc-inside li {
float: left;
width: 49%;
margin: 0;
padding: 0;
display:inline;
}

.sb-bloc div.apps {
width: 245px;
height: 59px;
background: url("/upload/design/sidebar/apps/sidebar-div-h2.jpg") no-repeat scroll left top transparent;
color: #245170;
font-size: 18px;
line-height: 20px;
padding-left: 15px;
padding-top: 7px;
}

body .sb-bloc div.apps h2
{
background: none;
color: #245170;
font-size: 18px;
line-height: 20px;
padding-left: 0;
}

body #sidebar .sb-bloc div.apps h2 a
{
color: #245170;
}

body .apps-inside a
{
font-size: 13px;
font-weight: bold;
}

.sb-bloc-inside li h3{
padding: 0;
}

/*------------------
PAGE PRESSE
-------------------*/

a.title-link
{
outline: none;
}

.extrait{
font-style: italic;
}
.extrait a {
color: #777;
}
.extrait a:hover {
color: #d56f58;
}


#extrait_presse li{
border-bottom:2px solid #F0F0F0;
padding:0 0 15px 0;
background-image: none;
overflow:hidden;
height:100%;
}

.extrait-bloc{
height:100%;
overflow:hidden;
background:url(/upload/images/presse/quote2.png) 480px bottom no-repeat;
padding-bottom:10px;
color: #777777;
}

.extrait-bloc h3 a {
color: #777;
}
.extrait-bloc h3 a:hover {
color: #d56f58;
}


#extrait_presse .date{
color: #5d95c8;
font-size: 13px;
font-weight: bold;
}
	
#extrait_presse .media {
color:#d56f58;
font-size:18px;
font-weight: bold;
}
#extrait_presse h3 {
margin: 0;
padding: 0;
line-height: 1;
font-size: 15px;
}
	
#extrait_presse p {
padding: 10px 0 0 40px;
margin: 8px 0 0 0;
background: url(/upload/images/presse/quote1.png) top left no-repeat;
width: 450px;
float: left;
}

.dl-link{
margin-left:500px;
text-align: center;
height:100%;
}
	
.dl-link img{
margin-top:25px;
}
#audio1{
padding: 10px 0 0 35px;
float: left;
color: #FFF;
}

ul#theMenu{
border: 2px solid #ebebeb;
padding-left:0;
margin-left:0;
}

#content #theMenu span.head
{
display: block;
padding-left: 15px;
padding-top: 10px;
height: 36px;
}

/* Header links styling */
.section-title {
font-size: 16px;
color: #5d95c8;
}
#content #theMenu ul {
margin: 0;
padding: 10px 0;
}
#content #theMenu li {
margin:0;
padding:0;
}
#content #theMenu li li{
background: none;
margin:5px;
}
#content #theMenu li ul {
background: url(/upload/images/presse/shadow.png) left top repeat-x;
margin: 0;	
padding:10px;
}
#theMenu span.head {
background: url(/upload/images/presse/head.h3.png) left top repeat-x;
margin: 0;
padding: 0;
}

#theMenu span.head a { 
color:#777;
line-height:46px;
display:block;
margin:0;
padding-left: 15px;
}
h3.head a:hover { 
}

#theMenu a.selected span.head{ 
background:url(/upload/images/presse/head.h3.hover.png) left top repeat-x;
color:#c6c6c6;
}
a.selected span .section-title{
color:#FFF;
}
h3.selected a:hover { 
}

/*--------------------------
PAGE SURFACE
--------------------------*/
#surface-videos {
overflow: hidden;
clear: both;
}

#surface-videos ul {
float: right;
margin: 0;
padding: 0;
list-style-type: none;
width: 107px;
}

#surface-videos li {
margin: 0 0 1px 0;
padding: 0;
background: transparent;
}

#surface-videos li a {
overflow: hidden;
display: block;
}

/*-----------------------
Page nos développements
-----------------------*/

#nos-developpements img {
display: block;
}
#content #nos-developpements ul {
margin: 0;
padding: 0;
}
#content #nos-developpements li {
float: left;
width: 320px;
padding: 0;
margin: 0 0 0 8px;
position: relative;
background: url(/upload/design/developpements/dev-box-bg.png) no-repeat bottom left;
}
#nos-developpements div {
border-left: solid 1px #eee;
border-right: solid 1px #eee;
height: 490px;
overflow: hidden;
margin-bottom: 12px;
}
#nos-developpements div img {
position: absolute;
bottom: 45px;
right: 2px;
}
#content #nos-developpements h2 {
padding: 0 10px;
}
#content #nos-developpements p {
padding: 0 10px;
margin: 10px 0;
}
#nos-developpements a.dev-button {
display: block;
width: 228px;
height: 41px;
text-indent: -9999px;
outline: 0;
position: absolute;
bottom: -10px;
left: 45px;
}
#nos-developpements .dev-surface a.dev-button {
background: url(/upload/design/developpements/dev-surface-button.png) no-repeat;
}
#nos-developpements .dev-surface a.dev-button:hover {
background: url(/upload/design/developpements/dev-surface-button.png) no-repeat 0 -41px;
}
#nos-developpements .dev-seven a.dev-button {
background: url(/upload/design/developpements/dev-seven-button.png) no-repeat;
}
#nos-developpements .dev-seven a.dev-button:hover {
background: url(/upload/design/developpements/dev-seven-button.png) no-repeat 0 -41px;;
}

#nos-developpements .dev-surface a.dev-button.us {
background: url(/upload/design/developpements/dev-surface-button.png) no-repeat 0 -82px;
}
#nos-developpements .dev-surface a:hover.dev-button.us {
background: url(/upload/design/developpements/dev-surface-button.png) no-repeat 0 -123px;
}
#nos-developpements .dev-seven a.dev-button.us {
background: url(/upload/design/developpements/dev-seven-button.png) no-repeat 0 -82px;
}
#nos-developpements .dev-seven a:hover.us.dev-button {
background: url(/upload/design/developpements/dev-seven-button.png) no-repeat 0 -123px;
}


#nos-developpements .dev-surface a.dev-button.de {
background: url(/upload/design/developpements/dev-surface-button.png) no-repeat 0 -164px;
}
#nos-developpements .dev-surface a:hover.dev-button.de {
background: url(/upload/design/developpements/dev-surface-button.png) no-repeat 0 -205px;
}
#nos-developpements .dev-seven a.dev-button.de {
background: url(/upload/design/developpements/dev-seven-button.png) no-repeat 0 -164px;
}
#nos-developpements .dev-seven a:hover.de.dev-button {
background: url(/upload/design/developpements/dev-seven-button.png) no-repeat 0 -205px;
}

#nos-developpements .dev-surface a.dev-button.es {
background: url(/upload/design/developpements/dev-surface-button.png) no-repeat 0 -246px;
}
#nos-developpements .dev-surface a:hover.dev-button.es {
background: url(/upload/design/developpements/dev-surface-button.png) no-repeat 0 -287px;
}
#nos-developpements .dev-seven a.dev-button.es {
background: url(/upload/design/developpements/dev-seven-button.png) no-repeat 0 -246px;
}
#nos-developpements .dev-seven a:hover.es.dev-button {
background: url(/upload/design/developpements/dev-seven-button.png) no-repeat 0 -287px;
}


#nos-developpements .dev-surface a.dev-button.it {
background: url(/upload/design/developpements/dev-surface-button.png) no-repeat 0 -328px;
}
#nos-developpements .dev-surface a:hover.dev-button.it {
background: url(/upload/design/developpements/dev-surface-button.png) no-repeat 0 -369px;
}
#nos-developpements .dev-seven a.dev-button.it {
background: url(/upload/design/developpements/dev-seven-button.png) no-repeat 0 -328px;
}
#nos-developpements .dev-seven a:hover.it.dev-button {
background: url(/upload/design/developpements/dev-seven-button.png) no-repeat 0 -369px;
}


/*--------------------
contact
------------------*/
/* mapmonde */
#mapmonde hr {
clear:both;
color: #d56f58;
background-color: #d56f58;
height: 1px;
border:0;
margin:1em 0;
}
.map-col1 {
width:33%;
float:left;
}
.map-col2 {
width:66%;
float:left;
}
.map-col {
width:50%;
float:left;
overflow:hidden;
}
#mapmonde .map-col h3, #mapmonde .map-col1 h3 {
color:#242424;
font-size: 16px;
font-variant: small-caps;
}

/*--------------------
SLIDESHOW
--------------------*/
/* resto touch */
#restotouch img {
float:left;
margin: 0 10px 10px 0;
}
#restotouch h2 {
clear:both;
}
#slideshow {
position:relative;
margin: 0 auto;
width: 650px;
height:350px;
}
#slideshow img {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow img.active {
z-index:10;
opacity:1.0;
}
#slideshow img.last-active {
z-index:9;
}

/* Slideshow Resto'Touch et Paint'Touch et Windows 7*/
#slideshow2 {
width: 660px; /* Old : 670px; */
height: 350px;
position: relative;
overflow: hidden;
left: -31px;
}

#slideshow2Content {
width: 650px;
position: absolute;
top: 0;
margin-left: 0;
}

ul#slideshow2Content {
margin-left: 0;
}

#slideshow2Content li {
background: transparent;
margin: 0;
padding: 0;
}

.slideshow2Image {
float: left;
position: relative;
display: none;
}

.slideshow2Image span {
position: absolute;
left: 16px;
font-family: Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 690px; /* Old : 592px; */
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
font-weight: bold;
font-size: 16px;
bottom: 10px; /* IE8 position */
}

.slideshow2Image span, #ie8#fix {
bottom: 15px; /* All navigators except IE8 */
}


div#video
{
width:850px;
}

/*--------------------
SmoothDivScroll (diaporama)
--------------------*/
/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
min-width: 66px;
width: 66px;
height: 160px;
/* There is a big background image and it's used to solve some problems I experienced
in Internet Explorer 6. */
background-image: url(/upload/images/smoothdiv/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
left: 0;
/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
cursor: url(/upload/images/smoothdiv/cursor_arrow_left.png), url(/upload/images/smoothdiv/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
background-image: url(/upload/images/smoothdiv/arrow_left.gif);				
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35; /* Standard CSS3 opacity setting */
-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
min-width: 66px;
width: 66px;
height: 160px;
background-image: url(/upload/images/smoothdiv/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
left: 573px;
cursor: url(/upload/images/smoothdiv/cursor_arrow_right.png), url(/upload/images/smoothdiv/cursor_arrow_right.cur),e-resize;
}

.nos-developpements div.scrollingHotSpotLeft
{
top: 19px; /* pour page nos-developpements */
}


.nos-developpements div.scrollingHotSpotRight
{
top: 19px; /* pour page nos-developpements */
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
background-image: url(/upload/images/smoothdiv/arrow_right.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35;
filter: alpha(opacity = 35);
-moz-opacity: 0.35;
zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
position: relative;
overflow: hidden;
width: 500px;
height: 100%;
margin-left: 70px;
}

.nos-developpements div.scrollWrapper
{
position: relative;
overflow: hidden;
width: 500px;
height: 193px;
margin-left: 70px;
}

div.scrollableArea
{
position: relative;
width: 500px;
height: 100%;
}

div.scrollableArea a img
{
border: none;
}

#makeMeScrollable
{
width:100%;
height: 160px;
position: relative;
top: 3px;
}
	
#makeMeScrollable div.scrollableArea *
{
position: relative;
float: left;
margin: 0;
padding: 0;
}

/*~°
Nos developpements - Thumbs
*/
#dev-surface-page a.dev-thumb 
{
height: 138px;
width: 211px;
display: block;
border: 0;
position: relative;
float: left;
text-decoration: none;
font-family: Calibri, "Trebuchet MS", Arial, sans-serif;
color: #fff;
margin-right: 3px;
margin-top: 10px;
margin-left: 5px;
}

#dev-surface-page a.dev-thumb:hover
{
text-decoration: underline;
}

#dev-surface-page ul.dev-thumb-list img
{
border: 0;
}

#dev-surface-page span.dev-thumb-list
{
list-style-type: none;
position: absolute;
top: 0;
height: 138px;
width: 211px;
background: url('../images/ombre-rotator.jpg') no-repeat 0 bottom;
z-index: 10;
}

#dev-surface-page span.dev-thumb-list
{
position: absolute;
display: block;
top: 0;
}

#dev-surface-page .dev-thumb-list img.second
{
display: none;
}

#dev-surface-page span.thumbTitle { /* Rectangle opacité */
display: block;
background: none repeat scroll 0 0 #A0A0A0;
font-size: 16px;
font-weight: bold;
margin: 0;
opacity: 0.8;
padding: 2px 0 5px 6px;
position: absolute;
top: 0px;
width: 205px;
z-index: 20;
color: #fff;
}

#dev-surface-page span.title-dev-appli
{
	display: block;
	position: absolute;
	top: 0px;
	z-index: 30;
	font-size: 16px;
	padding: 2px 0 5px 5px;
	font-weight: bold;
}

#dev-surface-page span:hover /* Pour navs qui prennent pas soulignement lien sur h3 */
{
text-decoration: underline;	
}


/*~°
PARTENAIRES
*/

#container div#partnersMasqueLeft, #container div#partnersMasqueRight
{
height: 55px;
width: 23px;
position: absolute;
z-index: 10;
}

#container div#partnersMasqueLeft
{
margin-left: -10px;
background: url('/upload/images/partenaires/diaporama/masque-partenaires-left.png') no-repeat;
}

#container div#partnersMasqueRight
{
background: url('/upload/images/partenaires/diaporama/masque-partenaires-right.png') no-repeat;
margin-right: 10px;
right: 0;
top: 0;
}

#content div#bloc-partenaires ul
{
margin-left: 0;
}

#content div#bloc-partenaires ul li
{
background-image: none;
margin-bottom: 10px;
padding-left: 0;
}

#content #partenaires_form input, #content #revendeurs_form input 
{
margin-bottom: 3px;
}



/*~°
DIAPORAMA PARTENAIRES
*/

#partnersContainer{
    width: 233px;
    height: 39px;
    white-space: nowrap;
    overflow: hidden;
    position:relative;
left: -10px;

}
.imgSlide{
    position:absolute;
    right: 0px;   
width: 380px;  
}

.imgSlide img
{
margin-right: 10px;
}

/*~°
FullSizeIt
*/

body #content .page-appli div.thumbLoader,
body #content div.thumbLoader
{
width: 160px;
height: 104px;
background-color: #fff;
position: absolute;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* ie8 */
filter: alpha(opacity=60);   /* second! for other ie versions */
opacity: 0.6;
z-index: 20;
left: 7px;
top: 12px;
padding: 0;
margin: 0;
border: 0;
}

body #content .page-appli div.fullSizeLoader, 
body #content div.fullSizeLoader 
{
width: 160px;
height: 104px;
position: absolute;
z-index: 21;
left: 7px;
top: 12px;
background: url('/upload/images/fullsizeimage/loader.gif') center center no-repeat;
padding: 0;
margin: 0;
border: 0;
}

/*~°
Applications similaires 
*/

body #content .page-appli div.applisSimilaires
{
background: none;
border: 0;
margin: 0;
padding: 0;
}

body #content div.applisSimilaires a
{
float: left;
margin-right: 45px;
}


#content div.applisSimilaires a:hover
{
text-decoration: none;
}

#content div.applisSimilaires span
{
display: block;
font-size: 15px;
margin: 15px 0 10px;
background: url("/upload/design/developpements/dev-h3-bg.png") no-repeat scroll 0 7px transparent;
clear: both;
padding: 0 0 0 15px;
}

#content div.applisSimilaires a:hover span
{
text-decoration: underline;
}

/*~°
En savoir plus
*/

p.en-savoir-plus
{
float: left;
margin-right: 40px;
}


/*~°
Découvrez aussi ...
*/

#content div.applisSimilaires span.link-sup
{
display: block;
font-size: 15px;
margin: 15px 0 10px;
font-weight: normal;
background: none;
padding-left: 0px;
}


/*~°
Supports tactiles 
*/

div#supports-tactiles div
{
float: left;
width: 300px;
height: 345px;
}

div#supports-tactiles div h3
{
font-size: 18px;
}

div#supports-tactiles div.kinect-asus, div#supports-tactiles div.m-surface-1
{
margin-right: 60px;
}

div#supports-tactiles div img
{
width: 300px;
height: 186px;
}

div#supports-tactiles div a, div#supports-tactiles div a img
{
border: none;
color: #535353;
}

/*~°
Nos références
*/

.extrait_reference{
font-style: italic;
}

.extrait_reference a {
color: #777;
}
.extrait_reference a:hover {
color: #d56f58;
}

#extrait_reference li{
border-bottom:2px solid #F0F0F0;
padding:0 0 15px 0;
background-image: none;
overflow:hidden;
height:100%;
}

.extrait-bloc-ref{
height:100%;
overflow:hidden;
background:url('http://www.after-mouse.com/upload/images/presse/quote2.png') 480px bottom no-repeat;
padding-bottom:10px;
}

.extrait-bloc-ref blockquote p
{
margin: 0;
}

.extrait-bloc-ref h3 a {
color: #777;
}
.extrait-bloc-ref h3 a:hover {
color: #d56f58;
}

#extrait_reference .nom-ref{
color: #5d95c8;
font-size: 13px;
font-weight: bold;
}
	
#extrait_reference .media {
color:#d56f58;
font-size:16px;
font-weight: bold;
}
#extrait_reference h3 {
margin: 0;
padding: 0;
line-height: 1;
font-size: 15px;
}
	
#extrait_reference blockquote{
padding: 10px 0 0 40px;
margin: 8px 0 0 0;
background: url('http://www.after-mouse.com/upload/images/presse/quote1.png') top left no-repeat;
width: 450px;
float: left;
font-size: 13px;
font-style: italic;
}

.company-link{
margin-left:500px;
text-align: center;
height:100%;
}
	
.company-link img{
margin-top:15px;
}


/*~°
Nos références
*/
 
/*ROTATOR*/

a.references
{
height: 170px;
width: 240px;
display: block;
border: none;
clear: both;
}

ul.infinite-rotator img
{
border: none;
}

#content ul.infinite-rotator
{
list-style-type: none;
position: relative;
margin-top: 10px;
height: 170px;
width: 240px;
background: url('/upload/images/references/galerie/rotator/ombre-rotator.jpg') no-repeat 0 bottom;
margin-left: 0px;
}

#content ul.infinite-rotator li
{
position: absolute;
display: block;
top: 0;
display: none;
background: none;
padding: 0;
margin: 0;
}

/*~°
Concept multi-devices Accordeon 
*/



#content .accordeonMultiDevices ul#theMenu2
{
margin-left: 0;
background: none;
}

#content .accordeonMultiDevices li.head
{
padding: 10;
margin: 0;
}

#content .accordeonMultiDevices li.second
{
background: none;
}

#content .accordeonMultiDevices a
{
color: #535353;
outline: none;
}

#content .accordeonMultiDevices img.thumb-multi-devices
{
float: left;
border: none;
margin-top: 5px;
}

#content .accordeonMultiDevices li.head-list
{
padding: 0;
background: none;
}

#content .accordeonMultiDevices .head-list span
{
display: block;
margin: 1em 0;
margin-left: 115px;
font-size: 13px;
text-align: justify;
color: #535353;
}

#windows7-devices table
{
width: 640px;
margin-left: 20px;
padding-right: 20px;
}

#windows7-devices table td
{
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}

#windows7-devices table td.li_label
{
font-weight: bold;
width: 30%;
}

#windows7-devices table td img 
{
max-width: 230px;
}

#content .accordeonMultiDevices .head-list span.click-list
{
color: #D56F58;
margin: 0;
}

#content .accordeonMultiDevices ul.expand
{
margin-left: 0;
}

#content .accordeonMultiDevices ul.expand li.expand-first
{
padding: 0;
background: none;
}

/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:hidden;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0; overflow: hidden;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{}
    #cboxTopLeft{width:14px; height:14px; background:url(/upload/images/references/galerie/rotator/colorbox/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(/upload/images/references/galerie/rotator/colorbox/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(/upload/images/references/galerie/rotator/colorbox/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(/upload/images/references/galerie/rotator/colorbox/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(/upload/images/references/galerie/rotator/colorbox/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(/upload/images/references/galerie/rotator/colorbox/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(/upload/images/references/galerie/rotator/colorbox/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(/upload/images/references/galerie/rotator/colorbox/controls.png) repeat-y -211px 0;}
    #cboxContent{background:#fff; overflow:visible;}
        #cboxLoadedContent{margin-bottom:5px;}
        #cboxLoadingOverlay{background:url(/upload/images/references/galerie/rotator/colorbox/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(/upload/images/references/galerie/rotator/colorbox/loading.gif) no-repeat center center;}
        #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
        #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
        
        #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(../colorbox/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
        #cboxPrevious{left:0px; background-position: -51px -25px;}
        #cboxPrevious.hover{background-position:-51px 0px;}
        #cboxNext{left:27px; background-position:-75px -25px;}
        #cboxNext.hover{background-position:-75px 0px;}
        #cboxClose{right:0; background-position:-100px -25px;}
        #cboxClose.hover{background-position:-100px 0px;}
        
        .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
        .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
        .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}



/*~°
Contact form
*/

#contact_form table, #contact_form td
{
border: none;
}

/*~°
Back To Top
*/

#backToTop
{
position: fixed;
bottom: 0;
margin-bottom: 20px;
display: none;
z-index: 999;
}

#backToTop a
{
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #d1d1d1;
color: #454545;
font-family: "Trebuchet MS",Trebuchet,Geneva,Helvetica,sans-serif;
font-weight: bold;
font-size: 11px;
padding: 5px;
background: #E4E4E4;
background-image: -moz-linear-gradient(100% 100% 90deg,#e3e3e3, #f6f6f6);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f6f6f6), to(#e3e3e3));
}